<template>
  <div class="person">
    <div class="person_left">
      <div id="Personalleft">
        <div class="personalzhtb">
          <img src="../assets/personaltb.png" alt="" />
          <p>YIJI 账户</p>
        </div>
        <div class="personallb">
        <p>个人信息</p>
        <ul>
          <li  @click="componentId='PersonalZhxx'">我的个人信息</li>
          <li  @click="componentId='PersonalZhsy'">我的头像</li>
          <li  @click="componentId='PersonalDizhi'">我的地址簿</li>
        </ul>
        <p>订单信息</p>
        <ul>
          <li  @click="componentId='PersonalDd'">我的订单</li>
        </ul>
      </div>
      </div>
    </div>
    <div class="person_right">
        <component :is="componentId"></component>
      </div>
  </div>
</template>

<script>
import PersonalZhsy from "@/components/PersonalZhsy.vue";
import PersonalZhxx from "@/components/PersonalZhxx.vue";
import PersonalDizhi from "@/components/PersonalDizhi.vue";
import PersonalDd from "@/components/PersonalDd.vue";
export default {
  name: "Personal",
   data(){
    return{
      componentId:PersonalZhsy,
    }
  },
  components: {
    PersonalZhsy,
    PersonalZhxx,
    PersonalDizhi,
    PersonalDd,
  },
  created() {
    if(this.$route.query.routeLink){
      this.componentId=this.$route.query.routeLink
    }else{
      this.componentId=PersonalZhxx
    }
    
  },
};
</script>
<style scoped>
.person {
  display: flex;
}
.person p{
  font-size: 14px;
}
.person_left {
  flex: 2.5;
}
.person_right {
  flex: 7.5;
}

#Personalleft{
  width: 70%;
  margin-left: 30%;
}
#Personalleft p{
  margin-bottom: 0;
}
.personalzhtb {
  position: relative;
}
.personalzhtb img {
  position: absolute;
  top: 38%;
  left: 10%;
}
.personalzhtb p {
  width: 100%;
  height: 60px;
  line-height: 60px;
  font-size: 20px;
  text-align: center;
  background-color: #000;
  border: #000 solid 1px;

  color: #fff;
  clear: both;
}
.personallb p{
    width: 100%;
    height: 50px;
    line-height: 50px;
    border: #000 solid 1px;
    border-top-color: transparent;
    padding-left: 10%;
    margin-bottom: 0;
}
.personallb ul{
    width: 100%;
    border-left: #000 solid 1px;
    border-right: #000 solid 1px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 0;
    padding-left: 0;
}
.personallb>ul:nth-child(2n){
    border-bottom: 1px solid #000;
}
.personallb li{
    padding-left: 20%;
    height: 40px;
    line-height: 40px;    
    font-size: 13px;
}
.personallb li:hover{
    background-color: #c8cbcc;
}
</style>
